<template>
    <div class="flight-item">
        <div @click="isShow = !isShow">
            <!-- 显示的机票信息 -->
            <el-row type="flex" align="middle" class="flight-info">
                <el-col :span="6"> <span>{{data.airline_name}} </span> {{data.flight_no}} </el-col>
                <el-col :span="12">
                    <el-row
                        type="flex"
                        justify="space-between"
                        class="flight-info-center"
                    >
                        <el-col :span="8" class="flight-airport">
                            <strong>{{data.dep_time}}</strong>
                            <span>{{data.org_airport_name}}{{data.org_airport_quay}}</span>
                        </el-col>
                        <el-col :span="8" class="flight-time">
                            <span>{{duration}}</span>
                        </el-col>
                        <el-col :span="8" class="flight-airport">
                            <strong>{{data.arr_time}}</strong>
                            <span>{{data.dst_airport_name}}{{data.dst_airport_quay}}</span>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="6" class="flight-info-right">
                    ￥<span class="sell-price">{{bestPrice}}</span>起
                </el-col>
            </el-row>
        </div>
        <el-collapse-transition>
          <div class="flight-recommend" v-if="isShow">
            <!-- 隐藏的座位信息列表 -->
            <el-row type="flex" justify="space-between" align="middle">
                <el-col :span="4">低价推荐</el-col>
                <el-col :span="20">
                    <el-row
                        type="flex"
                        justify="space-between"
                        align="middle"
                        class="flight-sell"
                        v-for="seat in data.seat_infos"
                        :key="seat.seat_xid"
                    >
                        <el-col :span="16" class="flight-sell-left">
                            <span>{{seat.group_name}}</span> | {{seat.supplierName}}
                        </el-col>
                        <el-col :span="5" class="price"> ￥{{seat.org_settle_price}} </el-col>
                        <el-col :span="3" class="choose-button">
                            <el-button type="warning" size="mini"
                              @click="$router.push({
                                path:'/air/order',
                                query:{
                                  id:data.id,
                                  seat_xid:seat.seat_xid
                                }
                              })"
                            >
                                选定
                            </el-button>
                            <p>剩余：{{seat.nums}}</p>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
          </div>
        </el-collapse-transition>
    </div>
</template>

<script>
    export default {
      props:['data'],
      data () {
        return {
          isShow:false  
        }
      },
      computed: {
        bestPrice(){
          // 遍历当前航班的所有座位数据, 对比过后, 拿出最便宜的那张返回出来
          // 先预设第一个座位信息的价格就是最低
          let bestPrice = this.data.seat_infos[0].settle_price_child
          // 遍历所有座位, 每个座位信息都拿出来对比, 如果有更低的就替换掉原来的数据
          this.data.seat_infos.forEach(seat=>{
            if(seat.settle_price_child<bestPrice){
              bestPrice = seat.settle_price_child
            }
          })
          return bestPrice
        },
        duration(){
          // 切割时间字符串
          const arrayDepTime = this.data.dep_time.split(':')
          const arrayArrTime = this.data.arr_time.split(':')
          // 两个的总分钟数
          const depMin = Number(arrayDepTime[0]) * 60 + Number(arrayDepTime[1]) 
          const arrMin = Number(arrayArrTime[0]) * 60 + Number(arrayArrTime[1])
          // 相差的分钟
          let result = arrMin - depMin
          // 如果跨了一天经过零时的时候数据会变成负数, 需加上一天的分钟数
          // 判断
          if(result < 0){
            result += 24 * 60
          }
          return Math.floor(result/60) + '时' + result%60 + '分'
        }
      }
    };
</script>

<style scoped lang="less">
    .flight-item {
        border: 1px #ddd solid;
        margin-bottom: 10px;

        .flight-info {
            padding: 15px;
            cursor: pointer;

            > div {
                &:first-child,
                &:last-child {
                    text-align: center;
                }
            }
        }

        .flight-info-center {
            padding: 0 30px;
            text-align: center;

            .flight-airport {
                strong {
                    display: block;
                    font-size: 24px;
                    font-weight: normal;
                }
                span {
                    font-size: 12px;
                    color: #999;
                }
            }

            .flight-time {
                span {
                    display: inline-block;
                    padding: 10px 0;
                    border-bottom: 1px #eee solid;
                    color: #999;
                }
            }
        }

        .flight-info-right {
            .sell-price {
                font-size: 24px;
                color: orange;
                margin: 0 2px;
            }
        }
    }

    .flight-recommend {
        background: #f6f6f6;
        border-top: 1px #eee solid;
        padding: 0 20px;

        .flight-sell {
            border-bottom: 1px #eee solid;
            padding: 10px 0;

            &:last-child {
                border-bottom: none;
            }

            .flight-sell-left {
                font-size: 12px;
                span {
                    color: green;
                }
            }

            .price {
                font-size: 20px;
                color: orange;
            }

            .choose-button {
                text-align: center;
                color: #666;
                button {
                    display: block;
                    width: 100%;
                    margin-bottom: 5px;
                }
            }
        }
    }
</style>